import React from 'react';
import RadioSelectFormItem from '@/pages/Task/components/RadioSelect';
import { Pagination } from '@/components';
import { Modal, Form, Table, Button, message, Icon } from 'antd';
import ReRateInfo from '@/pages/Task/components/ScoreModal/ReRateInfo';
import request from '@/utils/request';

const formLayout = {
    wrapperCol: { span: 18 },
    labelCol: { span: 4 }
};
const EstimateModal = ({ form, modalVisible, setModalVisible, modalData = {}, modalType }) => {
    let width = 864;
    let title;
    let tableText;
    // 修改公用模态框文案样式
    if (modalType === 'ESTIMATION') {
        // 估算
        title = '估算详情';
        width = 600;
    } else if (modalType === 'LAUNCH_ESTIMATION') {
        // 发起估算
        width = 864;
        title = '发起估算详情';
        tableText = '已选任务清单：';
    } else if (modalType === 'RESUME_ESTIMATION') {
        // 重估
        title = '重估详情';
    } else if (modalType === 'LAUNCH_RESUME_ESTIMATION_APPLY') {
        // 发起重估申请
        title = '重估申请详情';
    } else {
        console.log('没有该类型');
    }
    // console.log('===============================================>modalData', modalData);
    const {
        taskInfoMap = [],
        taskEstimationFile = [],
        taskReEstimationFile = [],
        content = '',
        estimationValue = '',
        employeeList = [],
        operateReason = ''
    } = modalData;
    const dataSource = [taskInfoMap];
    const employeeString = () => {
        const employee = (employeeList && employeeList.length > 0 && employeeList.map(item => item.employeeName)) || [];
        return employee.join('；');
    };
    const [pagination, setPagination] = React.useState({
        pageNo: 1,
        pageSize: 10
    });
    const [reRateData, setReRateData] = React.useState('');

    const columns = [
        {
            title: '序号',
            render: (text, record, index) => index + 1
        },
        {
            title: '任务编号',
            dataIndex: 'taskNo'
        },
        {
            title: '名称',
            dataIndex: 'taskName',
            render: text => (
                <div
                    style={{
                        width: '100%',
                        minWidth: 200,
                        position: 'relative'
                    }}
                >
                    <span
                        style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            top: 0,
                            transform: 'translateY(-50%)',
                            overflow: 'hidden',
                            whiteSpace: 'nowrap',
                            textOverflow: 'ellipsis'
                        }}
                        title={text}
                    >
                        {text}
                    </span>
                </div>
            )
        },
        {
            title: '执行人',
            dataIndex: 'taskExecutor',
            width: 100
        },
        {
            title: '所属部门',
            dataIndex: 'executorDepartmentName'
        }
    ];
    // 分页操作
    const handlePaginationChange = _pagination => {
        const { current, ...rest } = _pagination;
        setPagination({
            ...pagination,
            ...rest,
            pageNo: current
        });
    };
    // 详情附件
    const renderFiles = files => {
        const upload = files.map(item => (
            <div key={item.id}>
                {item.originName}
                <a rel="noopener noreferrer" target="_blank" style={{ marginLeft: 8 }} href={item.url} download>
                    <Icon type="download" />
                </a>
            </div>
        ));
        return files.length > 0 ? upload : '无';
    };

    const getReRateInfo = async () => {
        const result = await request(`/api/oa/v1/work/task/estimation/getestimationapplyresult/${modalData.id}`, {
            method: 'GET'
        });
        if (result.code === 10000) {
            setReRateData(result.data);
        } else {
            message.error(result.msg);
        }
    };

    React.useEffect(() => {
        // console.log(modalData, modalType, 'modalType');
        if (modalData.id && modalType === 'RESUME_ESTIMATION') {
            getReRateInfo();
        }
    }, [modalData, modalType]);

    // console.log(reRateData, 'reRateData');
    return (
        <Modal
            title={title}
            width={width}
            visible={modalVisible}
            // confirmLoading={confirmLoading}
            destroyOnClose
            onCancel={() => {
                setModalVisible(false);
            }}
            footer={[
                <Button
                    type="primary"
                    onClick={() => {
                        setModalVisible(false);
                    }}
                >
                    确定
                </Button>
            ]}
        >
            {/* 发起估算详情 */}
            {modalType && modalType === 'LAUNCH_ESTIMATION' && (
                <div>
                    <React.Fragment>
                        <Form {...formLayout}>
                            <RadioSelectFormItem
                                isDetail // 是否为详情页
                                data={modalData} // 详情页的数据
                                form={form}
                                label="估算人"
                                fieldMessage="请选择评估人类型"
                                customField="employeeIdList"
                                customMessage="请选择自定义估算人"
                                roleOptions={[
                                    { label: '发起人', value: 1 },
                                    { label: '审核人', value: 2 },
                                    { label: '参与人', value: 4 },
                                    { label: '验收人', value: 5 }
                                ]}
                            />
                        </Form>
                    </React.Fragment>
                    {/* {renderText()} */}
                    <div style={{ marginLeft: '42px' }}>{tableText}</div>
                    <Table
                        rowKey="id"
                        bordered={false}
                        columns={columns}
                        dataSource={dataSource.slice(
                            (pagination.pageNo - 1) * pagination.pageSize,
                            pagination.pageNo * pagination.pageSize
                        )}
                        style={{ margin: '12px' }}
                        pagination={false}
                    />
                    <Pagination
                        total={dataSource.length}
                        current={Number(pagination.pageNo)}
                        pageSize={Number(pagination.pageSize)}
                        onChange={handlePaginationChange}
                    />
                </div>
            )}
            {/* 发起估算 */}
            {modalType && modalType === 'ESTIMATION' && (
                <div>
                    <React.Fragment>
                        <Form {...formLayout}>
                            <Form.Item label="工作量" required>
                                <div>{estimationValue}</div>
                            </Form.Item>
                            <Form.Item label="说明">
                                <div>{content}</div>
                            </Form.Item>
                            <Form.Item label="附件">{renderFiles(taskEstimationFile)}</Form.Item>
                        </Form>
                    </React.Fragment>
                </div>
            )}
            {/*  重估申请详情 */}
            {modalType && modalType === 'LAUNCH_RESUME_ESTIMATION_APPLY' && (
                <div>
                    <React.Fragment>
                        <Form {...formLayout}>
                            <Form.Item label="选择重估人员" required>
                                <div>{employeeString()}</div>
                            </Form.Item>
                            <Form.Item label="原因" required>
                                <div>{operateReason}</div>
                            </Form.Item>
                            <Form.Item label="附件">{renderFiles(taskReEstimationFile)}</Form.Item>
                        </Form>
                    </React.Fragment>
                </div>
            )}
            {/* 重估 */}
            {modalType && modalType === 'RESUME_ESTIMATION' && (
                <div>
                    <React.Fragment>
                        <Form {...formLayout}>
                            <Form.Item label="工作量" required>
                                <div>{estimationValue}</div>
                            </Form.Item>
                            <Form.Item label="说明" required>
                                <div>{content}</div>
                            </Form.Item>
                            <Form.Item label="附件">{renderFiles(taskEstimationFile)}</Form.Item>
                        </Form>
                    </React.Fragment>
                    {/* <ReRateInfo data={[]} /> */}
                    <ReRateInfo {...reRateData} leftTitle="重估申请" fileProp="taskReEstimationFile" />
                </div>
            )}
        </Modal>
    );
};
export default Form.create()(EstimateModal);
